<template>
  <div class="user">
    <div class="user-style-body">
      <el-table :data="userDate" style="width: 100%" height="156px"
                v-loading = "pictLoading"
                element-loading-text = "数据正在加载中"
                element-loading-spinner = "el-icon-loading"
                stripe :header-cell-style="{background:'#1C7CD5',color:'#fff'}">
        <el-table-column prop="name" label="姓名" width="170" height="20">
        </el-table-column>
        <el-table-column prop="role" label="角色" width="70" height="20">
          <template slot-scope="scope">
            <span v-if="scope.row.role==1">技工</span>
            <span v-if="scope.row.role==2">安全员</span>
            <span v-if="scope.row.role==3">监理</span>
            <span v-if="scope.row.role==4">(负责人)</span>
            <span v-if="scope.row.role==5">(班长)</span>
            <span v-if="scope.row.role==6">(作业人员)</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="班组" width="70" height="20">
          <template slot-scope="scope">
            一组
          </template>
        </el-table-column>
        <el-table-column prop="temp" label="体温" width="80">
          <template slot-scope="scope">
            {{(scope.row.temp == null||scope.row.temp==0)?'-':scope.row.temp}}
          </template>
        </el-table-column>
        <el-table-column prop="pulse" width="60" label="心跳">
          <template slot-scope="scope">
            {{(scope.row.pulse == null||scope.row.pulse==0)?'-':scope.row.pulse}}
          </template>
        </el-table-column>
        <el-table-column label="血压" width="70">
          <template slot-scope="scope">
            {{(scope.row.systolic == null||scope.row.systolic == 0)?'-':scope.row.systolic}}/{{(scope.row.diastolic == null||scope.row.diastolic == 0)?'-':scope.row.diastolic}}
          </template>
        </el-table-column>
        <el-table-column prop="temp" label="最后体征时间" width="140">
          <template slot-scope="scope">
            <span disable-transitions v-if="scope.row.tempLastTime!=null">{{scope.row.tempLastTime | timestampToDate1}}</span>
            <span disable-transitions v-if="scope.row.tempLastTime==null">-</span>
          </template>
        </el-table-column>
        <el-table-column label="安全绳" width="70">
          <template slot-scope="scope">
            -
          </template>
        </el-table-column>
        <el-table-column label="高挂低用" width="70">
          <template slot-scope="scope">
            -
          </template>
        </el-table-column>
        <el-table-column prop="maoState" width="70" label="安全帽">
          <template slot-scope="scope">
            <span v-if="scope.row.maoState==1" style="color: #ff0000">未佩戴</span>
            <span v-else-if="scope.row.maoState==2">已佩戴</span>
            <span v-else>未绑定</span>
          </template>
        </el-table-column>
        <el-table-column prop="warringList" width="80" label="SOS/跌落">
          <template slot-scope="scope">
            <span v-if="has(scope.row.warringList,6)" style="color: #FF580E">SOS</span>
            <span v-else-if="has(scope.row.warringList,7)" style="color: #FF580E">跌落</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column prop="maoWorking" width="80" label="定位">
          <template slot-scope="scope">
            <span v-if="scope.row.warringList!=null && (has(scope.row.warringList,1)|| has(scope.row.warringList,2))" style="color: #FF580E">
              {{scope.row.warringList | hasWl}}
            </span>
            <span v-else>
              <span v-if="scope.row.maoWorking==1" style="color: #24BE5A">在线</span>
              <span v-if="scope.row.maoWorking==2" style="color: #FF580E ;">离线</span>
              <span v-if="scope.row.maoWorking==null" style="color: #495057">未定位</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="lon2" label="经度" width="90">
          <template slot-scope="scope">
            {{(scope.row.lon2==null||scope.row.lon2==0)?'-':Number(scope.row.lon2).toFixed(6)}}
          </template>
        </el-table-column>
        <el-table-column prop="lat2" label="纬度" width="80">
          <template slot-scope="scope">
            {{(scope.row.lat2==null||scope.row.lat2==0)?'-':Number(scope.row.lat2).toFixed(6)}}
          </template>
        </el-table-column>
        <el-table-column prop="alt" label="高度" width="80">
          <template slot-scope="scope">
            {{(scope.row.alt==null || scope.row.alt==0)?'-':Number(scope.row.alt).toFixed(2)}}
          </template>
        </el-table-column>
        <el-table-column prop="recordTime" width="140" label="最后定位时间">
          <template slot-scope="scope">
            <span disable-transitions v-if="scope.row.maoLastTime!=null">{{scope.row.recordTime | timestampToDate1}}</span>
            <span disable-transitions v-if="scope.row.maoLastTime==null">未定位</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>

<script>
export default {
  inject: ["reload"],
  name: "User",
  data() {
    return {
      pictLoading:true,
      addButton: "hiddenButton",
      saveButton: "hiddenButton",
      userDate: [],
      userInfo: {
        birthday: new Date("1971-01-01"),
        cardNo: "",
        createTime: "",
        gender: 1,
        id: "",
        name: "",
        phone: "",
        role: 1,
        state: 1,
      },
      userInfoStyle: "display:none",
    }
  },
  mounted() {
    let __this = this
    this.axios
      .get("device/listUserDevice ")
      .then(function (response) {
        let result = response.data
        if (result.code == "200") {
          __this.userDate = result.result
          __this.pictLoading = false
        }
      })
      .catch(function (error) {
        console.log(error)
      })
  },
  methods: {
    useradd() {
      if (this.saveButton == "showButton") {
        this.saveButton = "hiddenButton"
        this.userInfoReset()
      }
      this.userInfoStyle = "display:block;"
      this.addButton = "showButton"
      this.userInfo.state = 1
      this.userInfo.gender = 1
      this.userInfo.role = 1
      this.userInfo.birthday = new Date("1971-01-01")
    },
    has(arr, num) {
      let bool = false //默认不在数组中
      if (arr != null && arr.length > 0) {
        for (var i = 0, len = arr.length; i < len; i++) {
          //遍历数组的值
          if (arr[i] === num) {
            bool = true //若存在某个值与改值相等，bool值为true
            break
          }
        }
      }
      return bool //返回bool
    },

    saveFormPost(userInfo) {
      this.$refs.userInfo.validate((valid) => {
        if (valid) {
          /* json格式提交： */
          let formData = JSON.stringify(this.userInfo)
          let config = {
            headers: { "Content-Type": "application/json" },
          }
          this.axios.post("person/editPerson", formData, config).then((res) => {
            console.log(res.data.result)
            //this.reload()
            if (res.data.code == "200") {
              this.$message({
                message: "修改数据成功！",
                type: "success",
                offset: "300",
              })
              this.userInfoReset()
            }
          })
        } else {
          this.$message({
            message: "数据验证失败",
            type: "warring",
            offset: "300",
          })
        }
      })
    },
    userFormPost(userInfo) {
      this.$refs.userInfo.validate((valid) => {
        if (valid) {
          /* json格式提交： */
          let formData = JSON.stringify(this.userInfo)
          let config = {
            headers: { "Content-Type": "application/json" },
          }
          this.axios.post("person/savePerson", formData, config).then((res) => {
            console.log(res.data.result)
            //this.reload()
            if (res.data.code == "200") {
              this.$message({
                message: "添加数据成功！",
                type: "success",
                offset: "300",
              })
              this.userInfoReset()
              this.userDate.unshift(res.data.result)
            }
          })
        } else {
          this.$message({
            message: "数据验证失败",
            type: "warring",
            offset: "300",
          })
        }
      })
    },
    userInfoReset() {
      this.userInfo = {
        birthday: new Date("1971-01-01"),
        cardNo: "",
        createTime: "",
        gender: 1,
        id: "",
        name: "",
        phone: "",
        role: 1,
        state: 1,
      }
    },
    userFormCancle() {
      this.userInfoReset()
      this.userInfoStyle = "display:none"
      this.addButton = "hiddenButton"
      this.saveButton = "hiddenButton"
    },
    editUser(index, row) {
      if (this.addButton == "showButton") {
        this.addButton = "hiddenButton"
      }
      console.log(row.id)
      this.saveButton = "showButton"
      this.userInfoStyle = "display:block;"
      this.userInfo = JSON.parse(JSON.stringify(row))
      this.userInfo.birthday = new Date(row.birthday) //时间
    },
    deleteUser(index, row) {
      this.userInfoStyle = "display:none;"
      this.axios
        .get("person/deleteById?id=" + row.id)
        .then(function (response) {
          let result = response.data
          if (result.code == "200") {
            this.$message({
              message: "删除数据成功！",
              type: "success",
              offset: "300",
            })
          }
        })
        .catch(function (error) {
          console.log(error)
        })
      this.userDate.splice(index, 1)
    },
  },
  filters: {
    timestampToDate(cjsj, time = false) {
      var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-"
      var M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-"
      var D = (date.getDate() + 1 < 10 ? "0" + (date.getDate() + 1) : date.getDate() + 1) + " "
      if (time) {
        var h = (date.getHours() + 1 < 10 ? "0" + (date.getHours() + 1) : date.getHours() + 1) + ":"
        var m =
          (date.getMinutes() + 1 < 10 ? "0" + (date.getMinutes() + 1) : date.getMinutes() + 1) + ":"
        var s = date.getSeconds() + 1 < 10 ? "0" + (date.getSeconds() + 1) : date.getSeconds() + 1
        return Y + M + D + h + m + s
      } else {
        return Y + M + D
      }
    },
    timestampToDate1(cjsj, time = false) {
      var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-"
      var M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-"
      var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " "
      var h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":"
      var m = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ":"
      var s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()
      return Y + M + D + h + m + s
    },
    hasWl(arr) {
      let bool = "" //默认不在数组中
      if (arr != null && arr.length > 0) {
        for (var i = 0, len = arr.length; i < len; i++) {
          //遍历数组的值
          if (arr[i] == 1 || arr[i] == 2) {
            bool = "围栏告警" //若存在某个值与改值相等，bool值为true
            break
          }
        }
      }
      return bool //返回bool
    },
  },
}
</script>

<style scoped>
.user .user-style-body {
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  border-width: 0;
  position: fixed;
  top: 80px;
  left: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
  border-radius: 0.2rem;
  z-index: 999;
  height: 156px;
  background-color: #fff;
  width: 860px;
  padding: 2px;
}

.user .user-style-body .el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 30px;
}
.user-style-body .el-table__body tr,
.el-table__body td {
  padding: 0;
  height: 30px;
}

.user-style-body .el-table__row td {
  background-color: rgba(233, 243, 252, 1);
}
.user-style-body .el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: rgba(246, 251, 255, 1);
}
.user-style-body .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #d3faef;
  color: #118b9c;
}

.user-style-body table tr:first-child th:first-child {
  border-top-left-radius: 4px;
}

.user-style-body table tr:first-child th:last-child {
  border-top-right-radius: 4px;
}
.user-style-body table tr:last-child td:first-child {
  border-bottom-left-radius: 4px;
}

.user-style-body table tr:last-child td:last-child {
  border-bottom-right-radius: 4px;
}

/*修改滚动条样式*/
div::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  /**/
}
div::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}
div::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 10px;
}
div::-webkit-scrollbar-thumb:hover {
  background: #1c7cd5;
}
div::-webkit-scrollbar-corner {
  background: #179a16;
}
.user-add {
  position: absolute;
  left: 770px;
  top: 84px;
  z-index: 9999;
}
.user-info-form {
  display: none;
  flex-direction: column;
  min-width: 0;
  background-color: #fff;
  word-wrap: break-word;
  background-clip: border-box;
  width: 180px;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
  position: fixed;
  top: 80px;
  right: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 10px 10px;
  z-index: 200;
  height: 415px;
}

.user-info-for .el-input__inner {
  border-radius: 1px;
}
.user-info-for .el-input--prefix .el-input__inner {
  padding-left: 10px;
}
.user-info-for .el-input__prefix {
  left: 145px;
}
.el-form-item__content {
  line-height: 20px;
  font-size: 12px;
}
.el-form-item__label {
  line-height: 22px;
  font-size: 12px;
}
.el-form-item {
  margin-bottom: 2px;
}
.showButton {
  display: block;
}
.hiddenButton {
  display: none;
}
.el-table {
  font-family: "Microsoft YaHei" !important;
  font-size: 10px;
  font-weight: 500;
  color: #000;
}
.el-table td,
.el-table th {
  padding: 3px 0;
}
.el-table-column--selection .cell {
  padding-left: 10px;
}
</style>
